<script setup>
import {ref, reactive, onMounted} from 'vue'
import {useAdminStore} from "@/stores/modules/user";
import {AdminLoginService} from "@/api/login";
import useAdminrouter from "@/router/index.js";
import {ElMessage} from 'element-plus'

const useAdmin = useAdminStore()
const router = useAdminrouter
const loading = ref(false)

const conHeight = ref({
  height: ""
})
const getHeight = () => {
  conHeight.value.height = window.innerHeight + "px";
}
onMounted(() => {
      window.addEventListener("resize", getHeight())
    }
)
// 表单引用，做表单验证
const form = ref()
const formModel = ref({
  username: '',
  password: '',
})
const rules = reactive({
  username: [
    {required: true, message: '请输入用户名', trigger: 'blur'},
    {pattern: /^\S{3,15}$/, message: '用户名必须是3-15位的非空字符', trigger: 'blur'}
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    {pattern: /^\S{6,15}$/, message: '密码必须是6-15位的非空字符', trigger: 'blur'}
  ]
})

const handleSubmit = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      loading.value = true;
      // 登录
      setTimeout(async () => {
        try {
          await useAdmin.Login(formModel.value,);
          await router.push({
            path: '/admin/shopstatistics',
          });
        } catch (error) {
          console.error('登录失败:', error);
        } finally {
          loading.value = false; // 在登录成功或失败后，将 loading 值设回 false。
        }
      }, 1000);
    } else {
      console.log('error submit!');
      return false;
    }
  });
};

</script>
<template>
  <div class="box">
    <el-row type="flex" :style="conHeight" align="middle">
      <el-col :lg="{span:14, offset:10}" :md="{span:24}">
        <el-form
            :model="formModel"
            label-position="right"
            label-width="120px"
            class="login-form"
            :rules="rules"
            ref="form"
            :hide-required-asterisk="true"
        >
          <h2 style="text-align: center" class="center">后台管理登录</h2>
          <el-form-item prop="username" label="账号:">
            <el-row>
              <el-input type="text" size="large" v-model="formModel.username" class="input"></el-input>
            </el-row>
          </el-form-item>
          <el-form-item prop="password" label="密码:">
            <el-input @pressEnter="handleSubmit" type="password" size="large" v-model="formModel.password"
                      class="input"></el-input>
          </el-form-item>
          <div class="center">
            <el-button  type="primary" size="small" v-loading="loading" @click="handleSubmit(form)">登录</el-button>
          </div>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<style scoped>

.box {
  background: url("https://mmzdpicture.oss-cn-hangzhou.aliyuncs.com/login.jpg");
  background-size: 100% 100%;
}
.el-form-item{
  margin-left: 10px;
}

.login-form {
  font-size: 25px;
  background: #ffffff;
  width: 57%;
  height: 350px;
  min-width: 350px;
  max-width: 550px;
  padding: 10px 20px 20px 20px;
  border-radius: 10px;
  margin: 0 auto;
}

.input {
  max-width: 250px;
  margin-left: 10px;
}
.el-button{
  width: 100px;
  height: 50px;
  margin-left: 180px;
  margin-top: 20px;
}
</style>